<!--
  ~  Licensed to the Apache Software Foundation (ASF) under one or more
  ~  contributor license agreements.  See the NOTICE file distributed with
  ~  this work for additional information regarding copyright ownership.
  ~  The ASF licenses this file to You under the Apache License, Version 2.0
  ~  (the "License"); you may not use this file except in compliance with
  ~  the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  -->

<div class="standard-content-viewer flex h-screen">
    <form [formGroup]="contentFormGroup" class="w-full flex-1 flex flex-col gap-y-2">
        <div class="flex items-center">
            <mat-button-toggle-group formControlName="formatted" (change)="loadContent()">
                <mat-button-toggle value="true">Formatted</mat-button-toggle>
                <mat-button-toggle value="false">Original</mat-button-toggle>
            </mat-button-toggle-group>
        </div>
        @if (contentLoaded) {
            @if (error) {
                <div>{{ error }}</div>
            } @else {
                <div class="min-h-[108px]">
                    <codemirror formControlName="value" [config]="codemirrorConfig"> </codemirror>
                </div>
            }
        } @else {
            <ngx-skeleton-loader [count]="3"></ngx-skeleton-loader>
        }
    </form>
</div>
